<template>
  <div>
    <!-- 新建 -->
    <el-dialog
      title="新建"
      :visible.sync="addTemplateDialogVisible"
      width="1200px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="cancel"
      v-if="addTemplateDialogVisible"
    >
      <div style="height: 65vh; overflow: auto">
        <el-row :gutter="20" style="margin: 0; height: 100%">
          <!--部门数据-->
          <el-col :span="4" :xs="24">
            <div
              class="head-container"
              style="max-height: calc(100vh - 160px); overflow-y: auto"
            >
              <el-tree
                :data="deptOptions"
                :props="defaultProps"
                :check-on-click-node="true"
                :expand-on-click-node="false"
                ref="tree"
                show-checkbox
                node-key="id"
                default-expand-all
                highlight-current
                :check-strictly="true"
                @check="handleNodeClick"
              >
                <span slot-scope="{ node, data }" class="custom-tree-node">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="node.label"
                    placement="top-start"
                    :open-delay="500"
                  >
                    <span>
                      {{ node.label }}
                    </span>
                  </el-tooltip>
                </span>
              </el-tree>
            </div>
          </el-col>
          <!--用户数据-->
          <el-col :span="20" :xs="24" style="height: 100%;">
            <el-table  height="calc(45% - 45px)" :data="tableData" style="width: 100%;height: 45%;overflow: auto;margin-bottom: 10px;">
              <el-table-column label="项目编号" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.projectCode || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="项目名称" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.projectName || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="单价" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.unitPrice || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="单位" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.unit || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="120"
                fixed="right"
              >
                <template slot-scope="scope">
                  <i class="el-icon-circle-plus-outline" style="cursor: pointer;" @click="doAdd(scope.row)"></i>
                </template>
              </el-table-column>
            </el-table>

            <h3>已选择的项目</h3>
            <el-table height="calc(45% - 45px)" :data="tableDataDown" style="width: 100%;height: 45%;overflow: auto;">
              <el-table-column label="项目编号" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.projectCode || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="项目名称" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.projectName || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="单价" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.unitPrice || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="优惠价格" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                  <span>
                    <el-input v-model="scope.row.preferentialPrice" @input="inputVal(scope.$index,scope.row.preferentialPrice)"></el-input>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="单位" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.unit || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="数量" width="250" show-overflow-tooltip align="center">
                <template slot-scope="scope">
                  <el-input-number @change="changeVal(scope.$index,scope.row.total)" size="mini" v-model="scope.row.total" :min="1"></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="120"
                fixed="right"
              >
                <template slot-scope="scope">
                  <i class="el-icon-delete" style="cursor: pointer;color: red;" @click="doDel(scope.$index)"></i>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  collectCostTypeList,
  collectCostDetailsList
} from '@/api/allApi.js'
export default {
  name: 'EitcErmPcAddTemplateDialog',
  // props: {
  //   listInId: {
  //     type: String,
  //     default: ''
  //   }
  // },
  data() {
    return {
      addTemplateDialogVisible: false,
      tableData: [],
      deptOptions: [],
      defaultProps: {
        children: 'childrenList',
        label: 'costTypeName'
      },
      listInIds: '',
      dialogVisible: false,
      tableDataDown: [],
    }
  },
  watch: {
    listInId(val) {
      if(val){
        this.initcollectCostTypeList()
        this.initList()
      }
    }
  },
  mounted() {
    this.initcollectCostTypeList()
    this.initList()
  },

  methods: {
    async initcollectCostTypeList() {
      const res = await collectCostTypeList()
      if (res.code !== 200) return this.$message.error(res.msg)
      this.deptOptions = res.data
    },
    async initList() {
      const res = await collectCostDetailsList({
        collectCostTypeId: this.listInIds
      })
      if (res.code !== 200) return this.$message.error(res.msg)
      this.tableData = res.data
      this.tableData.forEach(item => {
         item.preferentialPrice = item.unitPrice
         return item
      });
      this.$forceUpdate()
    },
    // 节点单击事件
    handleNodeClick(data, checked, indeterminate) {
      this.listInIds = data.id
      if (checked && this.$refs.tree.getCheckedNodes().length > 1) {
        this.$refs.tree.setCheckedNodes([data])
      }
      this.initList()
    },
    inputVal(index ,val){
      this.$set(this.tableDataDown, index, { ...this.tableDataDown[index], preferentialPrice: val });
    },
    changeVal(index ,val){
      this.$set(this.tableDataDown, index, { ...this.tableDataDown[index], total: val });
    },
    doAdd(row){
      let obj = row
      obj.total = 1
      this.tableDataDown.push(obj)
      this.$forceUpdate()
    },
    doDel(index){
      this.tableDataDown.splice(index,1)
    },
    cancel() {
      this.addTemplateDialogVisible = false
      this.tableDataDown = []
    },
    async submit() {
      if( this.tableDataDown.length === 0)return this.$message.error('请选择项目')
      this.$emit('tableDataDown',JSON.parse(JSON.stringify(this.tableDataDown)));
      this.cancel()
      this.addTemplateDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .el-table::before {
    display: none !important;
  }

 ::v-deep .el-table__fixed-right::before {
  display: none !important;
 }
</style>